import { ElButton } from "element-plus";
import { defineComponent } from "vue";
import BreadCrumb from "~/src/components/BreadCrumb";
import { Steps } from "~/src/components/Steps";
import SvgIconAl from "~/src/components/SvgIconAl";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import router from "@/router";
export default defineComponent({
    setup(props) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        const handleCancel = () => {
            router.push({
                path: "/HomePage"
            })
        }
        return () => <>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <BreadCrumb style={{marginBottom:'-2px', height: "80px", paddingLeft: "63px"}}></BreadCrumb>
            <div class={Style.container_mar} >
                <div class={Style.body}>
                    <div class={Style.outer}>
                        <div style={{ display: "flex" }}>
                            <div class={[Style.fontStyle, Style.doc_item]} style={{ flex: "1" }}>
                                <div >
                                    周树人
                                </div>
                                <div style={{ color: "#666666", fontSize: "28px" }}>
                                    职称：皮肤科主任、主任医生
                                </div>
                            </div>
                            <div class={Style.picStyle}>
                                <img src="src/assets/images/docPic.jpg"></img>
                            </div>
                        </div>
                        {
                            KEEP_VIDEO_TOP?"":<div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>
                        }

                        <div class={Style.viist_item}>
                            <div >
                                <div class={Style.second_item}>
                                    <SvgIconAl size={"32px"} icon="icon-shijian"></SvgIconAl>
                                    <div style={{ marginLeft: "21px" }}>
                                        2025-1-7（周二）  上午10:10
                                    </div>
                                </div>
                                <div style={{ marginLeft: "97px" }} class={Style.font_item}>就诊时间</div>
                            </div>
                            <div class={Style.is_hp}>
                                <div class={Style.is_hp_item}>
                                    <div class={Style.second_item}>
                                        <SvgIconAl size={"32px"} icon="icon-keshi"></SvgIconAl>
                                        <div style={{ marginLeft: "21px" }}>
                                            门诊——皮肤科
                                        </div>
                                    </div>
                                    <div style={{ marginLeft: "97px" }} class={Style.font_item}>就诊科室</div>
                                </div>
                                <div class={Style.is_hp_item}>
                                    <div class={Style.second_item}>

                                        <div style={{ marginLeft: "21px" }}>
                                            30元
                                        </div>
                                    </div>
                                    <div style={{ marginLeft: "62px" }} class={Style.font_item}>挂号费</div>
                                </div>
                            </div>
                        </div>
                        <div class={Style.divider_contain_bottom}>
                            <div class={Style.halfCircleLeft}></div>
                            <div class={Style.divider_contain}>
                                <div class={Style.divider_top2}></div>
                            </div>
                            <div class={Style.halfCircleRight}></div>
                        </div>
                        <div class={Style.pat_item} >
                            <div>
                                就诊人：方*川
                            </div>
                            <div class={Style.pat_item2}>
                                就诊卡号：3312*********4587
                            </div>
                        </div>
                    </div>
                    <div class={[Style.btnStyle, "qrxx_btn"]}>
                        <ElButton type="primary" plain onClick={handleCancel}>取消预约</ElButton>

                        <ElButton class={Style.btnStyle_item} type="success">立即缴费</ElButton>
                    </div>
                </div>
            </div>
        </>

    }
})
